<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item v-html="$store.state.Breadcrumb.BaiduMap"></el-breadcrumb-item>
    </el-breadcrumb>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>

      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
//npm安装： npm install vue-baidu-map --save

export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 116.504;
      this.center.lat = 39.715;
      this.zoom = 15;
    },
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 800px;
}
</style>